import React, { useContext } from "react";
import { View, StyleSheet, Dimensions, Text, TouchableOpacity } from "react-native";
import CommonContext from '@/utils/createContext'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const ImportMnemonicList = () => {

    const { inputMnemonicList, setCheckedIndex, setModalVisible } = useContext(CommonContext)
    const firstColumnList = [0, 3, 6, 9]

    const ifFirstColumn = (index) => {
        return firstColumnList.includes(index)
    }

    const handlePressItem = (index) => {
        setModalVisible(true)
        setCheckedIndex(index)
    }

    return <View style={styles.container}>
        {inputMnemonicList && inputMnemonicList.map((item, index) => {
            return (
                <TouchableOpacity onPress={() => handlePressItem(index)} key={index}>
                    <View style={{ ...styles.container_item, marginLeft: ifFirstColumn(index) ? 0 : 9 * ratio }}>
                        <Text style={styles.container_title}>{item}</Text>
                    </View>
                </TouchableOpacity>
            )
        })}
    </View>
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    container_item: {
        flexDirection: 'row',
        backgroundColor: '#FFFFFF',
        width: 104 * ratio,
        height: 33 * ratio,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 10 * ratio,
        borderWidth: 1,
        borderColor: '#DDDDDD'
    },
    container_title: {
        fontSize: 13,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#3A7DCA',
        lineHeight: 17
    }
})
export default ImportMnemonicList